<template>
  <div>
    <h1>Home {{ msg }}</h1>
    <!-- 
      父组件给子组件传值，设置一个 自定义的属性名，可以传递响应式数据对象，也可以传递静态数据
     -->
    <input type="text" name="" id="" v-model="msg" />
    <!-- 
      子传父，是父组件向子组件传递一个 自定义事件，子组件模拟触发实现通信
      -->
    <MyBox info="haha" :mmsg="msg" @change-msg="changeMsg" />
  </div>
</template>

<script>
import MyBox from "../components/MyBox.vue";
export default {
  data() {
    return {
      msg: "hahahaha",
    };
  },
  components: {
    MyBox,
  },
  methods: {
    changeMsg(name) {
      this.msg = name;
    },
  },
};
</script>

<style>
</style>